<template>
  <div class="chatView">
    <strong style="cursor: pointer" @click="leaveOut">登录成功界面</strong>
    <div>用户信息：</div>
    <div>账号：{{ accountInfo._account }}</div>
    <div>名称：{{ accountInfo._name }}</div>
    <div>头像：<img :src="accountInfo._avatar || config.AvatarUrl" width="90" height="90" alt=""/></div>
    <div>生日：{{ accountInfo._birth }}</div>
    <div>签名：{{ accountInfo._signature }}</div>

    <div class="friendList">
      <div>聊天列表</div>
      <ul>
        <li v-for="(item,index) in chatList" :key="item._session_id+index">
          {{item._session_id}}
        </li>
      </ul>
    </div>
    <div class="friendList">
      <div>好友/群 列表</div>
      <ul>
        <li v-for="(item,index) in joinList" :key="item._session_id+index" @click="setSendUser(item)">
          {{item._account}}-{{item._session_id}}-{{item._remark}}-{{item._type?'群':'朋友'}}
        </li>
      </ul>
    </div>
    <div>
      <div>添加好友:</div>
      <el-input type="text" maxlength="15" v-model="searchText" placeholder="请输入用户账号" :showWordLimit="true" @onEnter="addFriend(searchText)"/>
      <el-button @click="addFriend(searchText)">添加好友</el-button>
    </div>
    <div>
      <div>加入群聊:</div>
      <el-input type="text" maxlength="15" v-model="joinGroupText" placeholder="请输入群聊账号" :showWordLimit="true" @onEnter="joinGroup(joinGroupText)"/>
      <el-button @click="joinGroup(joinGroupText)">加入群聊</el-button>
    </div>
    <div>
      <div>创建群聊:</div>
      <el-input type="text" maxlength="15" v-model="newGroupName" placeholder="请输入群聊名称" :showWordLimit="true" @onEnter="createGroup"/>
      <el-button @click="createGroup">创建群聊</el-button>
    </div>
    <div class="friendList">
      <div>好友/群 请求列表</div>
      <ul>
        <li @click="showRequestElMessage(item, getRequestList)" v-for="(item,index) in requestList" :key="`${item._receiver_account}_${item._sender_account}_${index}`">
          {{item._sender_account}}-{{item._receiver_account}}-{{item._sender_remark}}-{{timeFormat(item._send_timestamp)}}-{{item._add_type===0?'好友请求':'群聊申请'}}-{{resultList[item._result]}}
        </li>
      </ul>
    </div>
    <div>
      <div>发送消息:{{msgToServer.type?'群消息':'个人'}}-{{msgToServer.sessionID}}</div>
      <el-input type="text" maxlength="100" v-model="message" placeholder="请输入聊天消息" :showWordLimit="true" @onEnter="sendSocketMessage"/>
      <el-button @click="sendSocketMessage">发送消息</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { socketLogin } from "@/websocket/socket-io";
import { userChatListStore, userJoinListStore } from "@/stores/userChatList";
import { config } from "@/config/config";
import { leaveOut, timeFormat } from "@/utils/utils";
import {
  addFriendFunc,
  createGroupFunc,
  getRequestListFunc,
  joinGroupFunc,
  requestAlertFunc, sendMessageFunc, setMessageOwner
} from "./Hooks";
import type { Ref } from "vue";
import { getUserInfoFromDB } from "@/Dexie/UserDB";

const resultList = ['待处理', '同意-已处理', '拒绝-已处理'];
let userChatListStoreIns = userChatListStore();
const { chatList } = storeToRefs(userChatListStoreIns);
// 获取好友/群列表
let userJoinListStoreIns = userJoinListStore();
const { joinList } = storeToRefs(userJoinListStoreIns);
// 添加好友
const [searchText, addFriend] = addFriendFunc();
// 加入群聊
const [joinGroupText, joinGroup] = joinGroupFunc();
//创建群
const [newGroupName, createGroup] = createGroupFunc();
//获取请求列表
const [requestList, getRequestList] = getRequestListFunc();
// 同意请求提示框显示
const [showRequestElMessage] = requestAlertFunc();
//发送消息
const [message, sendSocketMessage] = sendMessageFunc();
// 设置发送消息对象
const [msgToServer, setSendUser] = setMessageOwner();
// 初始化用户基础信息
let accountInfo:Ref<userInfoType|{}> = ref({});

//socket.io 连接
socketLogin();

onMounted(async () => {
  await getRequestList();
  let userInfoTemp = await getUserInfoFromDB(localStorage['account']);
  if (userInfoTemp) {
    accountInfo.value = userInfoTemp;
  }
});

</script>

<style scoped lang="less">
.chatView {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  .friendList{
    //background: #2b85e4;
    //color: white;
  }
}
</style>
